{extend name="user-layout" /}
{block name="content"}
<div class="content-wrapper">
    <div class="row">
        <div class="col-12 grid-margin">
            <div class="card card-statistics">
                <div class="card-header">
                    <input id='txtRange' autocomplete="off" type="text" name="range" class="form-control" style="width:320px;float:right;font-weight:bold;font-size:1.6em;" placeholder="请选择时间">
                </div>
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h3 id='txtOrderTotal'>0</h3>
                                    <p class="text-muted mb-0">订单</p>
                                </div>
                                <i class="icon-speedometer text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h3 id='txtFeesTotal'>￥0.00</h3>
                                    <p class="text-muted mb-0">流水</p>
                                </div>
                                <i class="icon-drop text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between border-right card-statistics-item">
                                <div>
                                    <h3 id='txtFeesPaid'>￥0.00</h3>
                                    <p class="text-muted mb-0">成交</p>
                                </div>
                                <i class="icon-check text-primary icon-lg"></i>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-3">
                            <div class="d-flex justify-content-between card-statistics-item">
                                <div>
                                    <h3 id='txtCashSuccess'>￥0.00</h3>
                                    <p class="text-muted mb-0">收入</p>
                                </div>
                                <i class="icon-wallet text-primary icon-lg"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 grid-margin stretch-card" style="margin-top:30px;">
            <div class="card">
                <div class="row h-100">
                    <div class="col-md-4 border-right">
                        <div class="card-body">
                            <h4 class="card-title">数据总计</h4>
                            <table class="table table-borderless">
                                <tbody>
                                <tr>
                                    <td>
                                        <h6>总订单数</h6>
                                        <p class="text-muted mb-0">Total Orders</p>
                                    </td>
                                    <td>
                                        <h4 class="text-primary">
                                            {$stat.order.total}
                                        </h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h6>总交易量</h6>
                                        <p class="text-muted mb-0">Total Success</p>
                                    </td>
                                    <td>
                                        <h4 class="text-danger">
                                            ￥{:number_format($stat.fees.total,2)}
                                        </h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h6>账户总资产</h6>
                                        <p class="text-muted mb-0">Total Balance</p>
                                    </td>
                                    <td>
                                        <h4 class="text-success">
                                            ￥{:number_format($wallet.enable + $wallet.disable,2)}
                                        </h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h6>可用余额</h6>
                                        <p class="text-muted mb-0">Enable Balance</p>
                                    </td>
                                    <td>
                                        <h4 class="text-warning">
                                            ￥{:number_format($wallet.enable,2)}
                                        </h4>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <h6>待结算余额</h6>
                                        <p class="text-muted mb-0">Disable Balance</p>
                                    </td>
                                    <td>
                                        <h4 class="text-primary">
                                            ￥{:number_format($wallet.disable,2)}
                                        </h4>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="card-body d-flex flex-column justify-content-between">
                            <div>
                                <h4>数据图表</h4>
                            </div>
                            <canvas id="barOrderChart" class="mt-auto"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">最近订单</h4>
                    <div class="table-responsive">
                        <table class="table">
                        <thead>
                        <tr>
                            <th></th>
                            <th>单号</th>
                            <th>金额</th>
                            <th>日期</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="list" id="vo"}
                        <tr>
                            <td>
                                <div class="disc bg-secondary"></div>
                            </td>
                            <td>
                                <h4 class="text-primary font-weight-normal">{$vo.out_trade_no}</h4>
                                <p class="text-muted mb-0">{$vo.trade_no}</p>
                            </td>
                            <td>
                                ￥{$vo.amount}
                            </td>
                            <td>
                                <p>{$vo.create_time|date='Y/m/d H:i:s',###}</p>
                                <p class="text-muted mb-0">{$vo.update_time|date='Y/m/d H:i:s',###}</p>
                            </td>
                            <td>
                                {switch $vo.status}
                                {case 0}<label class="badge badge-dark">订单关闭</label>{/case}
                                {case 1}<label class="badge badge-warning">等待支付</label>{/case}
                                {case 2}<label class="badge badge-success">支付完成</label>{/case}
                                {default}<label class="badge badge-info">异常订单</label>
                                {/switch}
                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    </div>
                </div>
                {empty name="list"}
                <div class="card" id="context-menu-multi">
                    <div class="card-body">
                        <p class="card-text text-center text-danger">
                            <i class="icon-compass"></i>
                            暂无数据...
                        </p>
                    </div>
                </div>
                {/empty}
            </div>
        </div>
    </div> -->
</div>
{/block}

{block name="pagejs"}
<script src="__STATIC__/cloudui/js/chart.js"></script>
<script>
    function loadData(dateRange){
        $.post('user/get_welcome_stat', {range:dateRange}).done(function(res) {
            if (res.code == 1) {
                if(res.data.order.total)$('#txtOrderTotal').text(res.data.order.total);
                else $('#txtOrderTotal').text('0');

                if(res.data.fees.total)$('#txtFeesTotal').text('￥'+ parseFloat(res.data.fees.total).toFixed(2));
                else $('#txtFeesTotal').text('￥0.00');

                if(res.data.fees.paid)$('#txtFeesPaid').text('￥'+ parseFloat(res.data.fees.paid).toFixed(2));
                else $('#txtFeesPaid').text('￥0.00');
                  
                if(res.data.cash.total) $('#txtCashSuccess').text('￥'+ parseFloat(res.data.cash.total).toFixed(2));
                else $('#txtCashSuccess').text('￥0.00');
            }
        });
    }

    layui.use('laydate', function(){
        var laydate = layui.laydate;
        
        //执行一个laydate实例
        var dateRange = new Date().format("yyyy-MM-dd") + ' ~ ' + new Date().format("yyyy-MM-dd");
        var startDate1=new Date();
        var endDate1=new Date();
        var startDate2=new Date(new Date().setDate(1));
        var endDate2=new Date(new Date(new Date().setMonth(new Date().getMonth()+1)).setDate(0));
        laydate.render({
            elem: '#txtRange' 
            ,type: 'date'
            ,value: dateRange
            ,range: '~'
            ,trigger: 'click'
            ,btns: ['confirm']
            ,extrabtns: [     
                {id:'today', text:'当天', range:[startDate1, endDate1]},
                {id:'thismonth', text:'当月', range:[startDate2, endDate2]},
            ]
            ,done: function(value, date, endDate){
                loadData(value);
            }
        });

        loadData(dateRange);
    });
</script>
{/block}

